<%--
  Created by IntelliJ IDEA.
  User: 97990
  Date: 2022/7/19
  Time: 18:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="/common/head.jsp"></jsp:include>
    <title>图书管理页</title>
</head>
<body>
<jsp:include page="/common/nav.jsp"></jsp:include>
<div class="container">
    <%--条件查询--%>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-info">
                <div class="panel-heading">条件查询</div>
                <div class="panel-body">

                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-1 control-label">图书名称</label>
                            <div class="col-sm-4">
                                <input type="text" id="bookName" class="form-control" placeholder="请输入图书名称">
                            </div>

                        </div>

                        <div class="btn-group col-lg-offset-5" role="group">
                            <button type="button" class="btn btn-success" onclick="search();">查询</button>
                            <button type="reset" class="btn btn-warning">重置</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <%--按钮--%>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <button type="button" class="btn btn-primary" onclick="toAdd();">
                    <span class="glyphicon glyphicon-plus"></span> 增加
                </button>
                <button type="reset" class="btn btn-danger" onclick="delBatch();">
                    <span class="glyphicon glyphicon-trash"></span> 批量删除
                </button>
            </div>
        </div>
    </div>

    <%--列表展示--%>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-success">
                <div class="panel-heading">用户列表</div>

                <div class="panel-body">
                    <table id="myTable" class="display table-bordered">
                        <thead>
                        <th>选择</th>
                        <th>图书名称</th>
                        <th>图书价格</th>
                        <th>操作</th>
                        </thead>
                        <tfoot class="text-center">
                        <th>选择</th>
                        <th>图书名称</th>
                        <th>图书价格</th>
                        <th>操作</th>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<jsp:include page="/common/script.jsp"></jsp:include>
<script>
    $(function (){
        initBookTable();
    })

    function search(){
        var v_param = {}
        v_param.bookName = $("#bookName").val();

        bookTable.settings()[0].ajax.data = v_param;
        bookTable.ajax.reload();
    }
    //列表展示
    function initBookTable(){
        bookTable = $("#myTable").DataTable({
            // 开启Datatables服务器模式
            // DataTables有两种基本的工作模式可供选择：
            // 客户端处理模式——此模式下如：过滤、分页、排序的处理都在浏览器中进行。
            // 服务器端处理模式——此模式下如：过滤、分页、排序的处理都放在服务器端进行。
            serverSide: true,

            language: {
                "url":'/js/DataTables/Chinese.json'
            },

            //开启垂直滚动条（X水平，Y垂直）
            // "scrollY": true ,
            //设置固定高度为200px 数据量溢出时出现滚动条
            // "scrollY": "200px",
            // "scrollCollapse": "true",

            //禁用排序
            "ordering": false,

            //禁用本地搜索
            "searching": false,

            // 设置每页显示条数下拉框的值
            "lengthMenu": [3, 5, 7, 10],

            "ajax": {
                "type":"post",
                "url":"/book/list.do",
            },

            "columns": [// 返回数据是对象列表的时候需要使用如下方式与字段一一对应
                {"data": "id",
                    render:function (data){
                        return '<input type="checkbox" name="ids" value="'+data+'"/>'
                    }
                },
                {"data": "bookName" },
                {"data": "bookPrice" },
                {"data": "id",
                    render:function (data, type, row, meta){
                        return '<div class="btn-group">'+
                            '<button type="button" class="btn btn-warning btn-sm" onclick="toUpdate(\''+data+'\')"><span class="glyphicon glyphicon-pencil"></span> 编辑</button>'+
                            '<button type="button" class="btn btn-danger btn-sm" onclick="deleteBook(\''+data+'\')"><span class="glyphicon glyphicon-trash"></span> 删除</button>'+
                            '</div>';
                    }
                },
            ]
        });
    }

    //跳转增加
    function toAdd(){
        location.href = "/book/toAdd.do";
    }

    //跳转修改
    function toUpdate(id){
        location.href = "/book/toUpdate.do?id="+id;
    }

    //删除
    function deleteBook(bookId){
        bootbox.confirm({
            size:"small",
            titile:"提示框",
            message:"确认删除吗？",
            buttons: {
                confirm: {
                    label: '<span class="glyphicon glyphicon-ok"></span>确定',
                    className: 'btn-success'
                },
                cancel: {
                    label: '<span class="glyphicon glyphicon-remove"></span>取消',
                    className: 'btn-danger'
                }
            },
            callback:function (result){
                if (result){
                    $.ajax({
                        type:"post",
                        url:"/book/delete.do",
                        data:{"id":bookId},
                        success:function (result){
                            if (result.code == 200){
                                //刷新
                                search();
                            }

                        }
                    })
                }
            }
        })
    }

    //批量删除
    function delBatch(){
        var idArr = [];
        $("input[name='ids']:checked").each(function (){
            idArr.push(this.value);
        })
        if (idArr.length>0){
            // 证明用户选择了，所以要提醒是否要删除
            bootbox.confirm({
                titile:"提示信息",
                message:"你确定删除吗?",
                buttons: {
                    confirm: {
                        label: '<span class="glyphicon glyphicon-ok"></span>确定',
                        className: 'btn-success'
                    },
                    cancel: {
                        label: '<span class="glyphicon glyphicon-remove"></span>取消',
                        className: 'btn-danger'
                    }
                },
                callback:function (result){
                    if (result){
                        $.post({
                            type:"post",
                            url:"/book/deleteBatch.do",
                            data:{"ids":idArr.join(",")},//join方法将js数组转换为指定符号分割的字符串
                            success:function (result){
                                if (result.code == 200){
                                    // 刷新
                                    search();
                                }
                            }
                        })
                    }
                }
            })
        }else {
            // 没有选择，提醒至少选中一项
            bootbox.alert({
                message: "<span class='glyphicon glyphicon-exclamation-sign'></span>至少选中一项",
                size: 'small',
                title: "提示信息"
            });
        }

    }
</script>
</body>
</html>
